<template>
  <div>
    <h1>事件</h1>
    <!-- 原生DOM事件 -->
    <pre @click="onPreClicked(1,2,3,$event)">大江东去
    浪淘尽，</pre>
    <br>
<!--    DOM事件click默认绑定在子组件的root元素-->
    <Event1 @click="onPreClicked(3,2,1,$event)"></Event1>
<!--    子组件定义了click事件,覆盖了DOM的click事件, 不再绑定到DOM元素-->
    <Event2 @customEvent="onCustomEvent" @click="onDomClicked"></Event2>
  </div>
</template>

<script setup lang="ts">
  import Event1 from "@/views/02_custom-event/Event1.vue";
  import Event2 from "@/views/02_custom-event/Event2.vue";

  const onPreClicked = (a,b,c,event)=>{
    console.log(a,b,c,event);
  }

  const onCustomEvent=(param1,param2)=> {
    console.log(param1,param2);
  }

  const onDomClicked=(param1,param2)=>{
    alert('customevent: click');
    console.log(param1,param2);
  }
</script>

<style scoped>
</style>